<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒模型</title>
    <style>

    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 100px;
        height: 100px;
        padding: 50px;
        margin: 30px;
        border: 20px solid #ccc;
    }
    </style>
</head>
<body>

    <div id="box">

    </div>


    <script>
    
    // 盒模型
        
        // client 自身宽高 + padding 但是不包含 border-width  clientLeft/clientTop -> border-width

        let box = document.getElementById('box');
        console.log(box.clientWidth);
        console.log(box.clientHeight);
        console.log(box.clientTop);
        console.log(box.clientLeft);


        // offset 

        console.log(box.offsetWidth);
        console.log(box.offsetHeight);
        console.log(box.offsetTop);
        console.log(box.offsetLeft);


       
    
    
    </script>

</body>
</html>